import { PointArr3 } from '@/types';
import { Shape as ShapeMesh } from '@react-three/drei';
import { ComponentProps } from 'react';
import { DoubleSide, Euler, Quaternion, Shape, Vector2, Vector3 } from 'three';

interface Props
  extends Pick<ComponentProps<typeof ShapeMesh>, 'position'>,
    Pick<JSX.IntrinsicElements['meshStandardMaterial'], 'color'> {
  direction: Vector3;
}

const points: PointArr3[] = [
  [0, 0.1, 0], // 起始位置点1
  [0.8, 0.1, 0], // 箭头上方的点1
  [0.8, 0.2, 0], // 箭头上方的点2
  [1, 0, 0], // 箭头尖端
  [0.8, -0.2, 0], // 箭头下方的点2
  [0.8, -0.1, 0], // 箭头下方的点1
  [0, -0.1, 0], // 起始位置点2
];
export const Arrow = (props: Props) => {
  const { direction, color, ...shapeMeshProps } = props;
  const rotation = new Euler().setFromQuaternion(
    new Quaternion().setFromUnitVectors(new Vector3(1, 0, 0), direction),
  );
  const shape = new Shape();
  shape.setFromPoints(points.map((point) => new Vector2().fromArray(point)));

  return (
    <ShapeMesh
      scale={100}
      args={[shape]}
      rotation={rotation}
      {...shapeMeshProps}
    >
      <meshBasicMaterial color={color} side={DoubleSide} />
    </ShapeMesh>
  );
};
